<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>泉初凯訫</title>

    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/ionicons.min.css}" rel="stylesheet">
    <link th:href="@{css/linear-icon.css}" rel="stylesheet">
    <link th:href="@{css/owl.carousel.css}" rel="stylesheet">
    <link th:href="@{css/owl.theme.css}" rel="stylesheet">
    <link th:href="@{css/magnific-popup.css}" rel="stylesheet" >
    <link th:href="@{css/weblysleek-ui-fonts.css}" rel="stylesheet" >
    <link th:href="@{css/main.css}" rel="stylesheet" >

<style>
        *{margin:0;padding:0;}
        body{padding:15px;}
        a{text-decoration: none;}
        ul{list-style:none;height:41px;}
        li{float:left;padding:10px;}
        #container div{height:300px;border:1px solid #0000ed;clear:both;}
        li.active{background:rgba(12,23,42,0.5);}
        li.active a{color:#fff;}
    </style>
    
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="images/Logo.png" alt="">
            <span class="text--bold">泉初凯訫</span>
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">首页 <span class="sr-only">(current)</span></a></li>
            <li><a href="#about">公司简介</a></li>
            <li><a href="#features">产品及业务</a></li>
            <li><a href="#testimonials">公司文化</a></li>
            <!-- <li><a href="#clients">clients</a></li> -->
            <li><a href="#blog">公告·新闻</a></li>
            <li><a href="#contact">站内搜索</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!-- HOME -->
    <section id="home" class="section jumbotron-section bg--position-center no-repeat bg-cover md-display-table" style="background-image:url(images/header.png)">
      <div class="jumbotron jumbotron-fluid bg-transparent md-display-table-cell md-vertical-middle">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <h2 class="">泉初凯訫网络服务有限公司.</h2>
              <p class="lead">泉初凯訫以全球专业技术人才为中心，通过当地
					法人及代理公司网络，传递中华工程技术
					优越性的世界性企业。
					泉初凯訫作为名副其实的软件开发的代
					表企业，已经成功进入包括上海，广州，深圳在内的等全国十多个城市。</p>
              <a class="btn btn-default btn-theme btn-rounded-corner" href="#about" role="button">公司简介</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- HOME END -->

    <!-- ABOUT -->
    <section id="about" class="section padding-top-bottom-65">
      <div class="row absolute-image-container">
        <div class="col-md-6 col-md-offset-6">
          <img class="max-width-100 position--realtive" src="images/video.png" alt="">
          <div class="position--absolute top-0 left-0 full-width full-height">
            <div class="buttuon-container">
              <div class="btn-wraper">
                <a href="http://www.iqiyi.com/v_19rrbv2s0s.html" class="popup-youtube btn btn-icon btn-round btn-icon-text test-popup-link">
                  <span class="btn-icon-container-lg  btn-icon-text-container bg-white border-white-opacity"><i class="ion-play"></i></span>
                  <span class="margin-left-10 line-height-btn-lg text-white">watch our story</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="regular-content">
              <header>
                <h3><span class="text--semi-bold">公司</span> </h3>
              </header>
              <div class="glo_1_branch" id="text1" style="display:block;">
		<div class="glo_1_branch" id="text1" style="display:block;">
			<div class="glo_1_table">
				<table cellpadding="0" cellspacing="0" border="0">
					<caption></caption>
					<colgroup>
						<col width="100px">
						<col width="300px">
					</colgroup>
					<thead>
						<tr>
							<th>公司名称</th>
							<td>泉初凯訫</td>
						</tr>
						<tr>
							<th>成立日</th>
							<td>2018年2月 1日</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>Address</th>
							<td>珠江新城冼村路保利威座北塔11楼26号</td>
						</tr>
						<tr>
							<th>Zipcode</th>
							<td>121-534</td>
						</tr>
						<tr>
							<th>e-mail</th>
							<td>junkai@midasit.com</td>
						</tr>
						<tr>
							<th>Telephone</th>
							<td>020-87654389</td>
						</tr>
						<tr>
							<th>Fax</th>
							<td>80-11-134-2333</td>
						</tr>
					</tbody>
					<tfoot>
					</tfoot>
				</table>
			</div>
		</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    
<div >
    <ul id="container" class="section">
     	<list-li v-for="(msg,index) in msgs" :msg="msg" :key="msg.id" :class="{ active:oks['ok'+msg.id]}"></list-li>
    </ul>
    <el-main>
		<div id="containerApp"></div>
	</el-main>
</div>




    <!-- ABOUT END -->








    <!-- FEATURE -->
    <section id="features" class="section features">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="featured-image-container">
              <img class="max-width-100" src="images/featured-vector.png" alt="">
            </div>
          </div>
          <div class="col-md-6">
            <div class="regular-content margin-bottom--30">
              <header>
                <h3><span class="text--semi-bold">Best</span> <span class="text--light"> Featured</span></h3>
              </header>
              <p>Welcome to one of the world’s largest creative communities and the number one game development platform. Unity gives you everything.</p>
            </div>
            <div class="media">
              <a class="media-left" href="#">
                <div class="media-object"><i class="ion-ios-toggle-outline"></i></div>
              </a>
              <div class="media-body">
                <h4 class="media-heading">Goto Anything</h4>
                <div class="media-text">
                  <p>
                    Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.Triggered with Ctrl+P, it is possible to:
                  </p>
                </div>
              </div>
            </div>
            <div class="media">
              <a class="media-left" href="#">
                <div class="media-object media-iconic"><i class="ion-ios-photos-outline"></i></div>
              </a>
              <div class="media-body">
                <h4 class="media-heading">Multiple Selections</h4>
                <div class="media-text">
                  <p>
                    Make ten changes at the same time, not one change ten times. Sarwka selections allow you to interactively change many line.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- FEATURE END-->

    <!-- TESTIMONIAL -->
    <section id="testimonials" class="section testimonial-bg" style="background-image:url(images/testimonials.jpg)">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <div id="testimonial-carousel" class="owl-carousel testimonial-sliders">
              <div>
                <div class="row">
                  <div class="col-md-8 col-md-offset-2">
                    <div class="testimonial-container">
                      <div class="client-details text-center">
                        <img src="images/testimonial-1.png" alt="">
                        <h5 class="client-name">satisfied customer</h5> 
                        <hr class="section-devider">
                      </div>
                      <div class="testimonial-content">
                        <p class="testimonial-speech"><img class="img-qoute" src="images/quate.png" alt="">Welcome to one of the world’s largest creative communities and the number one game development platform.Unity gives you everything.You need to realize your creative vision fast, and move ahead.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <div class="row">
                  <div class="col-md-8 col-md-offset-2">
                    <div class="testimonial-container">
                      <div class="client-details text-center">
                        <img src="images/testimonial-1.png" alt="">
                        <h5 class="client-name">satisfied customer</h5> 
                        <hr class="section-devider">
                      </div>
                      <div class="testimonial-content">
                        <p class="testimonial-speech"><img class="img-qoute" src="images/quate.png" alt="">Welcome to one of the world’s largest creative communities and the number one game development platform.Unity gives you everything.You need to realize your creative vision fast, and move ahead.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <div class="row">
                  <div class="col-md-8 col-md-offset-2">
                    <div class="testimonial-container">
                      <div class="client-details text-center">
                        <img src="images/testimonial-1.png" alt="">
                        <h5 class="client-name">satisfied customer</h5> 
                        <hr class="section-devider">
                      </div>
                      <div class="testimonial-content">
                        <p class="testimonial-speech"><img class="img-qoute" src="images/quate.png" alt="">Welcome to one of the world’s largest creative communities and the number one game development platform.Unity gives you everything.You need to realize your creative vision fast, and move ahead.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>              
          </div>
        </div>
      </div>
    </section>
    <!-- TESTIMONIAL END-->

    <!-- WORKFLOW -->
    <section id="workflow" class="section padding-top-bottom-65">
      <div class="row absolute-image-container">
        <div class="col-md-6 col-md-offset-6">
          <img class="max-width-100" src="images/workflow.png" alt="">
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="regular-content">
              <header>
                <h3><span class="text--semi-bold">ONE editor,</span> <span class="text--light">ONE WORKFLOW</span></h3>
              </header>
              <p>Learn how to use Unity with our free tutorials, online training, courseware, and product documentation. Join our community and find the forum that's right for you. Start browsing thousands.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- WORKFLOW END-->
    

    <!-- CLIENT -->
    <!-- <section id="clients" class="section client-section bg--position-center no-repeat bg-cover" style="background-image:url(images/clints_logo.png)">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo1.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo2.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo3.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo4.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo5.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
          <div class="col-md-4 col-sm-6 ">
            <img src="images/logo6.png" alt="" class="img-responsive max-width-100 max-height-60 padding-15 align--center">
          </div>
        </div>
        <div class="author-name-sign text-center">-And thousand of more companies</div>
      </div>
    </section> -->
    <!-- CLIENT END -->

    <!-- BLOG -->
    <section id="blog" class="section section-news">
      <div class="container">
        <header class="header">
          <h3 class="text-center"><span class="text--semi-bold">Latest</span> <span class="text--light">News</span></h3>
        </header>
        <div id="blog-carousel" class="owl-carousel">
          <div>
            <div class="news-card">
              <img src="images/blog1.png" alt="" class="img-responsive max-width-100">
              <div class="news-content">
                <p><span class="category-name">desktop</span></p>
                <p class="news-title">Attaching your project to a bug report</p>
                <p class="news-date">21-07-2016</p>
              </div>
            </div>
          </div>
          <div>
            <div class="news-card">
              <img src="images/blog2.png" alt="" class="img-responsive max-width-100">
              <div class="news-content">
                <p><span class="category-name">mobile</span></p>
                <p class="news-title">A Simple Workflow For Development</p>
                <p class="news-date">21-02-2016</p>
              </div>
            </div>
          </div>
          <div>
            <div class="news-card">
              <img src="images/blog3.png" alt="" class="img-responsive max-width-100">
              <div class="news-content">
                <p><span class="category-name">game</span></p>
                <p class="news-title">Dolphin Ads Platform Has Been Updated</p>
                <p class="news-date">21-08-2016</p>
              </div>
            </div>
          </div>
          
          <div>
            <div class="news-card">
              <img src="images/blog1.png" alt="" class="img-responsive max-width-100">
              <div class="news-content">
                <p><span class="category-name">desktop</span></p>
                <p class="news-title">Attaching your project to a bug report</p>
                <p class="news-date">21-01-2016</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- BLOG END-->

    <!-- SUBSCRIPTION -->
    <section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
              <header>
                <h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
              </header>
              <div class="subscription-form">
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                      <input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
                      <div class="input-group-addon subscribe-addons">subscribe</div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- SUBSCRIPTION END-->

    <!-- FOOTER -->
    <footer>
      <section class="section footer-top">
        <div class="container">
          <div class="row">
            <div class="col-md-5">
              <div class="row">
                <div class="col-md-6 col-sm-6">
                  <div class="list-item-header">
                    download
                  </div>
                  <div class="list-group footer-list-group">
                    <a href="#" class="list-group-item">Dolphin</a>
                    <a href="#" class="list-group-item">Web Player</a>
                    <a href="#" class="list-group-item">Cache server</a>
                    <a href="#" class="list-group-item">Audio player</a>
                    <a href="#" class="list-group-item">Older Version </a>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6">
                  <div class="list-item-header">
                    RESOURCES
                  </div>
                  <div class="list-group footer-list-group">
                    <a href="#" class="list-group-item">Learn Dolphin</a>
                    <a href="#" class="list-group-item">Latest news</a>
                    <a href="#" class="list-group-item">Documantion</a>
                    <a href="#" class="list-group-item">FAQ</a>
                    <a href="#" class="list-group-item">Gameplay</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-7">
              <div class="row">
                <div class="col-md-6">
                  <div class="list-item-header">
                    contact
                  </div>
                  <div class="contact-details">
                    <div class="media">
                      <div class="media-left contact-media-left">
                        <p>Address</p>
                      </div>
                      <div class="media-body">
                        <p>560 Judah St &amp; 15th Ave, Apt 5 San Francisco, CA, 230903 Newyork</p>
                      </div>
                    </div>
                    <div class="media">
                      <div class="media-left contact-media-left">
                        <p>Mobile</p>
                      </div>
                      <div class="media-body">
                        <p>+440 231 258 12</p>
                      </div>
                    </div>
                    <div class="media">
                      <div class="media-left contact-media-left">
                        <p>Fax</p>
                      </div>
                      <div class="media-body">
                        <p>+440 231 258 12</p>
                      </div>
                    </div>
                    <div class="media">
                      <div class="media-left contact-media-left">
                        <p>Email</p>
                      </div>
                      <div class="media-body">
                        <p>example@mail.com</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <br/><br/><br/><br/><br/><br/><br/>
	              <a id="scroll-top-div" href="" class="pull-right back-top-btn">back to top <span class="btn-icon"><i class="ion-ios-arrow-thin-up"></i></span></a>
	            </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="footer-bottom">
        <div class="container">
          <hr class="footer-devider">
          <div class="row">
          	<div class="col-md-5"></div>
            <div class="col-md-5">
              <ul class="footer-menu">
                <li><a href="">刘泉乐</a></li>
                <li><a href="">谢寅初</a></li>
                <li><a href="">林凯</a></li>
                <li><a href="">gxy</a></li>
              </ul>
            </div>
          </div>
          
          <div class="row">
          	<div class="col-md-5"></div>
          	<div class="col-md-5"><p class="copyright">Copyright © 2018 <a href="#" target="_blank" title="">泉初凯訫</a> </p></div>
          </div>
        </div>
      </section>
    </footer>
    
    
    <!-- PRELOADER -->
    <div class="preloader-body">
      <div class="cube-wrapper">
        <div class="cube-folding">
          <span class="leaf1"></span>
          <span class="leaf2"></span>
          <span class="leaf3"></span>
          <span class="leaf4"></span>
        </div>
        <span class="loading" data-name="Loading">Loading</span>
      </div>
    </div>
  </body>
  
    <script th:src="@{js/jquery-3.1.0.min.js}"></script>
    <script th:src="@{js/bootstrap.min.js}"></script>
    <script th:src="@{js/owl.carousel.js}"></script>
    <script th:src="@{js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{js/main.js}"></script>
    <script th:src="@{js/vue/vue.js}"></script>
  
  
 <script>
 Vue.component('list-li',{
     props:['msg','oks'],
     template:'<li  @click="clickli(msg.id)" :mark="msg.id" ><a href="#container">{{msg.text}}</a></li>',
     methods:{
         clickli:function(index){
             for(let ok in vm.oks){
                 vm.oks[ok]=false;
             }
             vm.oks['ok'+index]=true;
             
             $.get("/myhome",function(data){
     			$('#containerApp').html(data);
     	 	});
         }
     }
 });
 Vue.component('list-div',{
     props:['ok','index'],
     template:'<div>{{index}}-{{ok}}</div>'
 });
 var vm=new Vue({
     el:'#container',
     data:{
         msgs:[
             {id:1,text:'公司位置'},
             {id:2,text:'公司规模和人员'},
             {id:3,text:'公司业务方向'},
             {id:4,text:'联系我们'}
         ],
         oks:{
             ok1:true,
             ok2:false,
             ok3:false,
             ok4:false
         }
     }

 })

</script>
  
</html>

